﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        div {
            width:200px;
            height:200px;
            background:red;
        }
    </style>
    
</head>
<body>
    <div></div>
    <script>
        var div = document.querySelector(`div`);
        div.onmousedown = function () {
            console.log(`div被点击了`);
        }
        div.ontouchstart = function (e) {
            console.log(`手机按下事件`);
            //位于屏幕的所有的手指列表信息
            console.log(e.touches);
            //一个手指的对象
            console.log(e.touches[0]);

        }
        div.ontouchend = function () {
            console.log(`手机抬起事件`);
        }
        div.ontouchmove = function () {
            console.log(`手指移动事件`);
        }
    </script>
</body>
</html>